<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>满屏飘字代码</title>
<link rel="icon" type="image/x-icon" href="favicon.ico">
<style>
  html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000;
    height: 100%;
    font-family: "Microsoft YaHei", sans-serif;
  }

  .popup {
    position: absolute;
    width: 250px;
    height: 60px;
    border: 2px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    background-color: #fff;
    overflow: hidden;
    animation: fadeIn 0.5s ease forwards;
  }

  .titlebar {
    background-color: #e5e5e5;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    color: #333;
    padding: 0 6px;
    font-weight: bold;
    border-bottom: 1px solid #bbb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
  }

  .title-left {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .icon {
    width: 14px;
    height: 14px;
  }

  .close-btn {
    font-weight: bold;
    color: #333;
    cursor: pointer;
    margin-left: 6px;
    transition: color 0.2s ease;
  }

  .close-btn:hover {
    color: red;
  }

  .content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100% - 20px);
    text-align: center;
    font-size: 15px;
    font-weight: 600;
  }

  .div_btn a{color:#fff;text-decoration:none;}
  .div_btn {
    position: fixed;
    cursor: pointer;
    width: 33px;
    height: 33px;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 1em;
    line-height: 33px;
    text-align: center;
    z-index: 999;
    bottom: 110px;
    right: 20px;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }

  /* 点击提示样式 */
  .click-tip {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    z-index: 1000;
  }
</style>
</head>
<body>
  <!-- 点击提示 -->
  <div class="click-tip" id="clickTip">点击屏幕开始</div>

  <div id="an" style="display: block;">
    <div class="div_btn" id="btn-make" style="animation: 1s ease 0s infinite normal both running jello;">
        <a href="http://accct.top/565/4.html"><span>分享</span></a>
    </div>
    <div class="div_btn" id="div_support" style=" bottom: 65px; ">
        <a href="http://accct.top/565/5.html"><span>制作</span></a>
    </div>
  </div>

  <!-- 音频元素（提前加载音效） -->
  <audio id="popupSound" preload="auto" loop>
    <!-- 替换为你的音效链接，支持mp3/wav/ogg格式 -->
    <source src="https://sf5-hl-ali-cdn-tos.douyinstatic.com/obj/ies-music/7559239046338186026.mp3" type="audio/mpeg">
    您的浏览器不支持音频播放
  </audio>

<script>
  /** 参数配置 **/
  const INTERVAL = 200;
  const MAX_COUNT = 500;
  const WINDOW_WIDTH = 250;
  const WINDOW_HEIGHT = 60;

  const tips = [
    "多喝水哦~", "保持微笑呀~", "每天都要元气满满~",
    "记得吃水果~", "保持好心情~", "好好爱自己~",
    "我想你了~", "梦想成真~", "期待下一次见面~",
    "顺顺利利~", "早点休息~", "愿所有烦恼都消失~",
    "别熬夜~", "今天过得开心嘛~", "天冷了，多穿衣服~"
  ];

  const bgColors = [
    'lightpink', 'skyblue', 'lightblue', 'lightsteelblue', 'powderblue',
    'lightcyan', 'aliceblue', 'azure', 'lightgreen', 'lavender',
    'lightyellow', 'plum', 'coral', 'bisque', 'aquamarine',
    'mistyrose', 'honeydew', 'lavenderblush', 'oldlace'
  ];

  let activeCount = 0;
  let isStarted = false; // 是否已点击屏幕开始
  const sound = document.getElementById('popupSound');
  const clickTip = document.getElementById('clickTip');

  // 点击屏幕触发开始
  document.body.addEventListener('click', () => {
    if (!isStarted) {
      isStarted = true;
      clickTip.style.display = 'none'; // 隐藏点击提示
      // 播放并循环音乐
      sound.currentTime = 0;
      sound.play().catch(err => console.log('音乐播放失败:', err));
    }
  });

  function random(min, max) {
    return Math.random() * (max - min) + min;
  }

  function createPopup() {
    if (!isStarted || activeCount > MAX_COUNT) return;
    activeCount++;

    const popup = document.createElement('div');
    popup.className = 'popup';
    popup.style.backgroundColor = bgColors[Math.floor(Math.random() * bgColors.length)];

    const screenW = window.innerWidth;
    const screenH = window.innerHeight;
    const x = random(0, screenW - WINDOW_WIDTH);
    const y = random(0, screenH - WINDOW_HEIGHT);
    popup.style.left = `${x}px`;
    popup.style.top = `${y}px`;

    // 标题栏
    const title = document.createElement('div');
    title.className = 'titlebar';

    const titleLeft = document.createElement('div');
    titleLeft.className = 'title-left';

    const icon = document.createElement('img');
    icon.src = 'favicon.ico';
    icon.className = 'icon';
    icon.alt = 'icon';

    const titleText = document.createElement('span');
    titleText.textContent = '温馨提示';

    titleLeft.appendChild(icon);
    titleLeft.appendChild(titleText);

    const closeBtn = document.createElement('span');
    closeBtn.className = 'close-btn';
    closeBtn.textContent = '×';
    closeBtn.onclick = () => {
      popup.remove();
      activeCount--;
    };

    title.appendChild(titleLeft);
    title.appendChild(closeBtn);

    // 内容部分
    const content = document.createElement('div');
    content.className = 'content';
    content.textContent = tips[Math.floor(Math.random() * tips.length)];

    popup.appendChild(title);
    popup.appendChild(content);
    document.body.appendChild(popup);
  }

  setInterval(createPopup, INTERVAL);
</script>

</body>
</html>